<template>
    <div class="big-box">
        <div class="head-box">
            <h3>产品案例</h3>
            <p>Product Case</p>
        </div>
        <div class="main-box" v-loading="loading">
            <div class="product-box" v-for="(item,index) in productList" :key="index"  >
                <router-link :to="`/productdetail?id=${item.id}`" tag="div">
                <div class="img-box">
                    <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt="">
                </div>
                <h3>{{item.name}}</h3>
                <p>{{item.descri}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import {getProductList2} from "../../../api";

    export default {
        name: "productCase",
        data(){
            return{
                productList:[],//产品数据
                loading:true//饿了么
            }
        },
        created() {
            getProductList2().then(res=>{
                res.rows.forEach(item=>{
                    if(item.route&&item.productSort == 0){
                        this.productList.push(item);
                        this.loading=false;
                    }
                })
            })
        }
    }
</script>

<style scoped lang="less">
.head-box{
    margin-bottom: 30px;
    h3 {
        text-align: center;
        font-size: 22px;
        font-weight: 500;
        line-height: 1.1;
        color: inherit;
    }
    p {
        text-align: center;
        font-size: 22px;
        font-weight: 500;
        line-height: 1.1;
        color: inherit;
        margin-top: 10px;
    }
}
    .main-box{
        display: flex;
        .product-box {
            width: 50%;
            display: block;
            min-height: 1px;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
            .img-box {
                overflow: hidden;
                height: 367px;
                img {
                    transition: 1s;
                    width: 100%;
                    height: 380px;
                }
                img:hover{
                    transform: scale(1.1, 1.1);
                }
            }
            h3 {
                margin-top: 10px;
            }
            h3:hover {
                text-decoration: underline;
            }
            p {
                color: #666;
                letter-spacing: 1px;
                line-height: 28px;
                font-size: 16px;
                text-align: left;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 3;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                margin-top: 20px;
            }
        }
    }
</style>